  <template>
  <a-modal
    title="新增船舶到港记录"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <!--      经 Form.create() 包装过的组件会自带 this.form 属性，如果使用 template 语法，可以使用-->
      <a-form :form="form">
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="船舶名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['shipName', {rules: [
                  { required: true, message: '请输入船舶名称', trigger: 'blur' },
                  { type: 'string', min: 1, message: '船舶名称不能为空', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="mmsi号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['mmsiNumber',{rules: [
                  {required: true, message: '请输入mmsi号，9位数字', trigger: 'blur'},
                  { validator: validateMmsi, trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="船舶类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select
                allowClear
                v-decorator="['typeId', {rules: [{ required: true, message: '请选择船舶类型', trigger: 'blur' }]}]"
                placeholder="请选择"
              >
                <a-select-option v-for="newType in shipTypes" :key="newType.typeId.toString()">{{ newType.shipType }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="船舶国籍"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
<!--              <a-input v-decorator="['shipCountry', {rules: [{required: true, message: '请输入船舶国籍', trigger: 'blur'}]}]" />-->
              <a-select
                allowClear
                v-decorator="['countryId', {rules: [{ required: true, message: '请选择船舶类型', trigger: 'blur' }]}]"
                placeholder="请选择"
              >
                <a-select-option v-for="newCountry in shipCountrys" :key="newCountry.countryId.toString()">{{ newCountry.shipCountry }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="出发港口"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
<!--              <a-input v-decorator="['beginPort', {rules: [{required: true, message: '请输入出发港口', trigger: 'blur'}]}]" />-->
              <a-select
                allowClear
                v-decorator="['beginPortId', {rules: [{ required: true, message: '请选择出发港口', trigger: 'blur' }]}]"
                placeholder="请选择"
              >
                <a-select-option v-for="beginPort in ports" :key="beginPort.portId.toString()">{{ beginPort.portName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="目标港口"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
<!--              <a-input v-decorator="['targetPort', {rules: [{required: true, message: '请输入目标港口', trigger: 'blur'}]}]" />-->
              <a-select
                allowClear
                v-decorator="['targetPortId', {rules: [{ required: true, message: '请选择船舶类型', trigger: 'blur' }]}]"
                placeholder="请选择"
              >
                <a-select-option v-for="newPort in ports" :key="newPort.portId.toString()">{{ newPort.portName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="出入类别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
<!--             . <a-input v-decorator="['shipCategory', {rules: [{required: true, message: '请输入出入类别', trigger: 'blur'}]}]" />-->
              <a-select
                allowClear
                v-decorator="['categoryId', {rules: [{ required: true, message: '请选择船舶出入类别', trigger: 'blur' }]}]"
                placeholder="请选择"
              >
                <a-select-option v-for="newCategory in shipCategorys" :key="newCategory.categoryId.toString()">{{ newCategory.shipCategory }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="涉疫等级"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
<!--              <a-input v-decorator="['epidemicGrade', {rules: [{required: true, message: '请输入涉疫等级', trigger: 'blur'}]}]" />-->
              <a-select
                allowClear
                v-decorator="['gradeId', {rules: [{ required: true, message: '请输入涉疫等级', trigger: 'blur' }]}]"
                placeholder="请选择"
              >
                <a-select-option v-for="newGrade in shipEpidemicGrades" :key="newGrade.gradeId.toString()">{{ newGrade.epidemicGrade }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item-->
<!--              label="风险等级"-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--            >-->
<!--              <a-input v-decorator="['riskGrade', {rules: [{required: false, message: '请输入风险等级', trigger: 'blur'}]}]" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="12" :sm="24">
            <a-form-item
              label="涉疫类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
<!--              <a-input v-decorator="['riskGrade', {rules: [{required: false, message: '请输入风险等级', trigger: 'blur'}]}]" />-->
              <a-select
                allowClear
                v-decorator="['epidemicTypeId', {rules: [{ required: true, message: '请输入涉疫类型', trigger: 'blur' }]}]"
                placeholder="请选择"
              >
                <a-select-option v-for="newEpidemic in shipEpidemicTypes" :key="newEpidemic.epidemicTypeId.toString()">{{ newEpidemic.epidemicType }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="备注"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input v-decorator="['remarkAny', {rules: [{required: false, message: '备注(非必要)', trigger: 'blur'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="申报时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker @change="onDeclareChange"
                             @ok="getDelareValue"
                             :show-time="{ format: 'HH:mm' }"
                             format="YYYY-MM-DD HH:mm"
                             v-decorator="['declareTime']" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="停泊时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker @change="onChange"
                             @ok="getDataValue"
                             :show-time="{ format: 'HH:mm' }"
                             format="YYYY-MM-DD HH:mm"
                             v-decorator="['berthingTime']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

  </a-modal>
</template>

<script>
  import { addShip } from '@/api/ship/ship'
  import moment from 'moment'
  export default {
    props: {

    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        shipTypes: [],
        shipCountrys: [],
        shipCategorys: [],
        shipEpidemicTypes: [],
        shipEpidemicGrades: [],
        ports: [],
        form: this.$form.createForm(this)
      }
    },
    methods: {
      add () {
        this.visible = true
      },
      // 前端验证mmsi号
      validateMmsi (rule, value, callback) {
        const reg = /^[0-9]{9}$/
        if (value === '' || value === undefined || value === null) {
            callback()
        } else {
          if ((!reg.test(value)) && value !== '') {
            callback(new Error('请输入正确的mmsi号'))
          } else {
            callback()
          }
        }
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (values.berthingTime !== undefined) {
            values.berthingTime = moment(values.berthingTime).format('YYYY-MM-DD HH:mm:ss')
          }
          if (values.declareTime !== undefined) {
            values.declareTime = moment(values.declareTime).format('YYYY-MM-DD HH:mm:ss')
          }

          // console.log(values)
          if (!errors) {
            addShip(values).then(() => {
              this.visible = false
              this.confirmLoading = false
              this.form.resetFields()
              this.$emit('ok')
            }).catch(err => {
              this.confirmLoading = false
              this.$message.error(err.result || '添加失败')
            })
          } else {
            this.confirmLoading = false
          }
        })
      },

      handleCancel () {
        this.form.resetFields()
        this.visible = false
      },
      onDeclareChange (date, dateString) {
        const data = this.$moment(date).format('YYYY/MM/DD HH:mm:ss')
        // console.log(data1)
        this.declareTime = data
      },
      onChange (date, dateString) {
        const data1 = this.$moment(date).format('YYYY/MM/DD HH:mm:ss')
        // console.log(data1)
        this.berthingTime = data1
      },
      getDataValue (value) {
        value = moment(value).format('YYYY-MM-DD HH:mm:ss') // 转换
      },
      getDelareValue (value) {
        value = moment(value).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  }
</script>
